<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>修改人员信息</title>
</head>
<body>
    <div align="center">
        <h1>修改人员信息</h1>
        <hr>
        <form action="" method="post" enctype="multipart/form-data">
            {% csrf_token %}

            <input type="hidden" value="{{person.id}}" name="id">
            <div>
                <label>姓名</label>
                <input type="text" name="name" id="name" value="{{person.name}}">
            </div>
            <br>
            <div>
                <label>邮箱</label>
                <input type="text" name="email" id="email" value="{{person.email}}">
            </div>
            <br>
            <div>
                <label>性别</label>
                <select name="gender">
                    {% if person.gender == "1" %}
                    <option value="1" selected>男</option>
                    {%endif%}
                    {% if person.gender == "2" %}
                    <option value="2"  selected>女</option>
                    {%endif%}
                </select>
            </div>
            <br>
            <div>
                <label for="head_img">头像<img id="imgforshow" src="/upload/{{person.head_img}}" style="height:60px; width:60px;"></label>
                <input type="file" name="head_img" id="head_img" style="display:none;">
            </div>
            <br>
            <div>
                <label>附件</label>
                <input type="file" name="attachment" id="attachment">
            </div>
            <br>
            <div>
                <input type="submit" value="保存">
            </div>

        </form>
    </div>
    <script src="{% static 'jquery-3.3.1.min.js' %}"></script>
    <script>
        $("#head_img").change(function(){
            var rd_img = new FileReader();
            rd_img.readAsDataURL(this.files[0]);
            rd_img.onload = function(){
                    $("#imgforshow").attr("src", rd_img.result)
                };
            });
    </script>
</body>
</html>